<template>
    <div>
        <van-cell-group>
            <van-field v-model="form.name" label="姓名：" placeholder="请输入您的姓名"/>
            <van-cell>
                <van-row>
                    <van-radio-group v-model="form.sex" style="width:70%">
                        <van-col span="9">性别：</van-col>
                        <van-col span="8">
                            <van-radio name="男">男</van-radio>
                        </van-col>
                        <van-col span="7">
                            <van-radio name="女">女</van-radio>
                        </van-col>
                    </van-radio-group>
                </van-row>
            </van-cell>
            <van-field v-model="form.phone" label="手机号码：" placeholder="请输入您的手机号码"/>
            <van-field v-model="form.idCard" label="身份证：" placeholder="请输入您的身份证号码"/>
            <van-row>
                <van-col span="10">
                    <van-cell title="身份证正面照："/>
                </van-col>
                <van-col span="14">
                    <van-uploader :after-read="onRead"
                                  style="width:44px;height:44px;text-align: center;line-height: 44px;">
                        <van-icon name="photograph" v-if="!(form.licenseImg.length>0)"/>
                        <img style="width:44px;height:44px;" src="" ref="workerAddImg" v-else/>
                    </van-uploader>
                </van-col>
            </van-row>
            <!--<van-cell title="户籍所在地：" ></van-cell>-->
            <!--<van-picker ref="provinces" :columns="provinces" @change="onProvinceChange" />-->
            <van-field v-model="position" label="户籍所在地：" readonly placeholder="选择省/市/区"
                       @click="openPopup(provinces)"></van-field>
            <van-popup v-model="showPopup" position="bottom" :close-on-click-overlay="false">
                <van-picker ref="provinces" :show-toolbar="true" @confirm="confirm" @cancel="cancel"
                            :columns="provinces" @change="onProvinceChange"/>
            </van-popup>
            <van-field label="工作城市：" placeholder="点击选择工作城市" readonly v-model="cityArr" @click="openWorkerCityPopup()"/>
            <van-popup v-model="showWorkCityPopup" position="bottom" @click-overlay="renderCityArr">
                <van-checkbox-group v-model="form.expectCities">
                    <van-cell-group>
                        <van-cell
                                v-for="(item, index) in expectCities"
                                clickable
                                :key="item"
                                :title="`${item}`"
                                @click="toggleExpectCities(index)"
                        >
                            <van-checkbox :name="item" ref="expectCitiesCheckboxes"/>
                        </van-cell>
                    </van-cell-group>
                </van-checkbox-group>
            </van-popup>

            <van-field label="从事工种：" placeholder="点击选择从事工种" readonly v-model="workTypeArr"
                       @click="openWorkerTypePopup()"/>
            <van-popup v-model="showWorkTypePopup" position="bottom" @click-overlay="renderWorkTypeArr">
                <van-checkbox-group v-model="form.workType">
                    <van-cell-group>
                        <van-cell
                                v-for="(item, index) in workType"
                                clickable
                                :key="item"
                                :title="`${item}`"
                                @click="toggleWorkType(index)"
                        >
                            <van-checkbox :name="item" ref="workTypeCheckboxes"/>
                        </van-cell>
                    </van-cell-group>
                </van-checkbox-group>
            </van-popup>
            <van-button type="warning" size="large" @click="save">添加提交</van-button>
        </van-cell-group>
    </div>
</template>
<script>
    import {
        CellGroup,
        Field,
        RadioGroup,
        Radio,
        Cell,
        Button,
        Picker,
        Checkbox,
        CheckboxGroup,
        Toast,
        Popup,
        Row,
        Col,
        Uploader,
        Icon,
    } from 'vant';
    import http from '../../common/http';

    export default {
        components: {
            [CellGroup.name]: CellGroup,
            [Field.name]: Field,
            [RadioGroup.name]: RadioGroup,
            [Radio.name]: Radio,
            [Cell.name]: Cell,
            [Button.name]: Button,
            [Picker.name]: Picker,
            [Checkbox.name]: Checkbox,
            [CheckboxGroup.name]: CheckboxGroup,
            [Toast.name]: Toast,
            [Popup.name]: Popup,
            [Row.name]: Row,
            [Col.name]: Col,
            [Uploader.name]: Uploader,
            [Icon.name]: Icon,

        },
        data() {
            return {
                form: {
                    name: '',
                    phone: '',
                    idCard: '',
                    sex: '男',
                    workType: [],
                    expectCities: [],
                    province: '',
                    city: '',
                    area: '',
                    licenseImg: '',
                },
                provincesData: null,
                workType: [],
                expectCities: [],
                worker: '',
                provinces: [
                    {
                        values: ['湖南'],
                        className: 'column1'
                    },
                    {
                        values: ['长沙', '株洲', '湘潭'],
                        className: 'column2',
                        defaultIndex: 2
                    },
                    {
                        values: ['雨湖区', '岳麓区', '湘潭县'],
                        className: 'column3',
                        defaultIndex: 2
                    }
                ],
                showPopup: false,
                isFirst: true,
                showWorkTypePopup: false,
                showWorkCityPopup: false,
                position: '',
                cityArr: '',
                workTypeArr: '',

            }
        },
        created() {
            this.$parent.title = '添加工人信息';
            this.getProvince();
        },
        methods: {
            getProvince() { //省市区
                http.getUserJsonData(`/user/worker/get`, {}, (data) => {
                    this.provincesData = data.provinces;
                    this.workType = data.workType;
                    this.expectCities = data.expectCities;
                    this.worker = data.worker;
                    Object.assign(this.form, this.worker);
                });
            },
            onProvinceChange(picker, values, index) {
                if (index == 0) {
                    picker.setColumnValues(1, Object.keys(this.provincesData[values[0]]));
                    picker.setColumnValues(2, this.provincesData[values[0]][picker.getColumnValue(1)]);
                }
                if (index == 1) {
                    picker.setColumnValues(2, this.provincesData[values[0]][values[1]]);
                }
            },
            toggleWorkType(index) {
                this.$refs.workTypeCheckboxes[index].toggle();
            },
            toggleExpectCities(index) {
                this.$refs.expectCitiesCheckboxes[index].toggle();
            },
            save() {
                if (!this.position || !this.workTypeArr || !this.cityArr || !this.form.idCard || !this.form.name || !this.form.phone) {
                    Toast('请完善好当前信息再提交。。。')
                    return;
                }
                let params = {};
                Object.assign(params, this.form);
                params.province = this.$refs.provinces.getColumnValue(0);
                params.city = this.$refs.provinces.getColumnValue(1);
                params.area = this.$refs.provinces.getColumnValue(2);
                params.workType = params.workType.join(',');
                params.expectCities = params.expectCities.join(',');
                Toast('信息保存中。。。');
                http.postUserJsonData(`/user/worker/save`, params, () => {
                    Toast('保存成功');
                    this.$router.push('/workerInfo')
                });
            },
            openPopup() {
                this.showPopup = true;
                if (!this.isFirst) return;
                this.isFirst = false;
                setTimeout(() => {
                    if (!this.worker) {
                        this.$refs.provinces.setColumnValues(0, Object.keys(this.provincesData));
                        this.$refs.provinces.setColumnValue(0, '湖南');
                        this.$refs.provinces.setColumnValues(1, Object.keys(this.provincesData['湖南']));
                        this.$refs.provinces.setColumnValue(1, '湘潭');
                        this.$refs.provinces.setColumnValues(2, this.provincesData['湖南']['湘潭']);
                        this.$refs.provinces.setColumnValue(2, '湘潭县');
                    } else {
                        this.$refs.provinces.setColumnValues(0, Object.keys(this.provincesData));
                        this.$refs.provinces.setColumnValue(0, this.worker.province);
                        this.$refs.provinces.setColumnValues(1, Object.keys(this.provincesData[this.worker.province]));
                        this.$refs.provinces.setColumnValue(1, this.worker.city);
                        this.$refs.provinces.setColumnValues(2, this.provincesData[this.worker.province][this.worker.city]);
                        this.$refs.provinces.setColumnValue(2, this.worker.area);
                    }
                }, 100)
            },
            confirm(data) {
                this.showPopup = false;
                this.form.province = data[0];
                this.form.city = data[1];
                this.form.area = data[2];
                if (Object.keys(this.provincesData[data[0]]).length == 1) {
                    this.position = data[0] + '/' + data[2];
                } else {
                    this.position = data[0] + '/' + data[1] + '/' + data[2];
                }
            },
            //渲染城市
            renderCityArr() {
                this.cityArr = '';
                this.form.expectCities.forEach((item) => {
                    this.cityArr = this.cityArr + item + ','
                })
            },
            //渲染工种
            renderWorkTypeArr() {
                this.workTypeArr = '';
                this.form.workType.forEach((item) => {
                    this.workTypeArr = this.workTypeArr + item + ','
                })
            },
            cancel() {
                this.showPopup = false;
            },
            openWorkerTypePopup() {
                this.showWorkTypePopup = true;
            },
            openWorkerCityPopup() {
                this.showWorkCityPopup = true;
            },
            onRead(file) {
                this.form.licenseImg = file.content;
                setTimeout(()=>{
                    this.$refs.workerAddImg.src = file.content;
                },10)
            },
        }
    }
</script>
